<template>
  <el-container style="height: 100vh; background: #ffffff; padding: 20px;">
    <el-header style="background: #1890ff; color: white; text-align: center; line-height: 20px; font-size: 24px; margin-bottom: 20px;">
      <h1>唐诗无双</h1>
    </el-header>
    <el-main>
      <!-- 唐诗分类导航 -->
      <el-menu mode="horizontal" :router="true">
        <el-menu-item index="/tang-poetry/category1">田园诗</el-menu-item>
        <el-menu-item index="/tang-poetry/category2">边塞诗</el-menu-item>
        <el-menu-item index="/tang-poetry/category3">咏物诗</el-menu-item>
      </el-menu>

      <!-- 诗人简介模块 -->
      <el-card class="mt-4">
        <template #header>
          <div class="card-header">
            <span>热门诗人简介</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(poet, index) in popularPoets" :key="index">
            <el-card shadow="hover">
              <h3>{{ poet.name }}</h3>
              <p>{{ poet.bio }}</p>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

      <el-row :gutter="30" class="mt-4">
        <el-col :span="8" v-for="(poem, index) in currentPoems" :key="index">
          <el-card shadow="hover" class="animated-card">
            <template #header>
              <div class="card-header">
                <span>{{ poem.title }}</span>
              </div>
            </template>
            <p>{{ poem.content }}</p>
            <el-button type="text" @click="showDetails(poem)">查看详情</el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 6, 9]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="poems.length"
      ></el-pagination>
      <el-dialog v-model="dialogVisible" title="唐诗详情">
        <h2>{{ currentPoem.title }}</h2>
        <p>{{ currentPoem.author }}</p>
        <p>{{ currentPoem.content }}</p>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, computed } from 'vue';

const poems = ref([
  { title: '静夜思', author: '李白', content: '床前明月光，疑是地上霜。举头望明月，低头思故乡。' },
  { title: '登鹳雀楼', author: '王之涣', content: '白日依山尽，黄河入海流。欲穷千里目，更上一层楼。' },
  { title: '春晓', author: '孟浩然', content: '春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。' },
  { title: '将进酒', author: '李白', content: '君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。' },
  { title: '春望', author: '杜甫', content: '国破山河在，城春草木深。感时花溅泪，恨别鸟惊心。烽火连三月，家书抵万金。白头搔更短，浑欲不胜簪。' },
  { title: '送元二使安西', author: '王维', content: '渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。' },
  { title: '早发白帝城', author: '李白', content: '朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。' },
  { title: '无题', author: '李商隐', content: '相见时难别亦难，东风无力百花残。春蚕到死丝方尽，蜡炬成灰泪始干。晓镜但愁云鬓改，夜吟应觉月光寒。蓬山此去无多路，青鸟殷勤为探看。' }
]);

const popularPoets = ref([
  { name: '李白', bio: '字太白，号青莲居士，又号“谪仙人”，唐代著名浪漫主义诗人。' },
  { name: '杜甫', bio: '字子美，自号少陵野老，唐代伟大的现实主  义诗人。' },
  { name: '王维', bio: '字摩诘，号摩诘居士，唐朝著名诗人、画家，精通诗、书、画、音乐等。' }
]);

const currentPage = ref(1);
const pageSize = ref(3);

const currentPoems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return poems.value.slice(start, end);
});

const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const dialogVisible = ref(false);
const currentPoem = ref({});

const showDetails = (poem) => {
  currentPoem.value = poem;
  dialogVisible.value = true;
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.animated-card {
  transition: all 0.3s ease;
}
.animated-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>